<html>
  <head>
    <style>
      section h4 {
        margin-bottom: 0;
      }
      section input {
        width: 100%;
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <h1>Ledger Hardware Wallet Support</h1>
    <div>
      <ol>
        <li>Connect your Ledger Nano X/S with a usb cable.</li>
        <li>Enter your PIN code.</li>
        <li>Open the Dfinity app on the Ledger device.</li>
        <li>
          Connect and get the Principal:
          <button id="connectLedgerBtn">Connect</button>
        </li>
      </ol>
    </div>

    <section>
      <h2>Principal Id</h2>
      <code id="ledgerPrincipal">&nbsp;</code>
    </section>
    <section>
      <h2>Actions:</h2>
      <li>
        <button id="checkAddressBtn" class="connected-only">Show</button>
        Show the Principal on the device.
      </li>
    </section>

    <section>
      <h2>Send message (Proto)</h2>

      <h4>Replica URL</h4>
      <input type="text" id="hostUrl" value="http://127.0.0.1:8080/" />

      <h4>Canister ID</h4>
      <input type="text" id="canisterId" value="rrkah-fqaaa-aaaaa-aaaaq-cai" />

      <h4>Method</h4>
      <input type="text" id="methodName" value="send_pb" />

      <h4>Proto Schema</h4>
      <textarea id="schema" cols="80" rows="20" style="width: 100%">
syntax = "proto3";

message TimeStamp {
  uint64 timestamp_nanos = 1;
}

message Memo {
  uint64 memo = 1;
}
message ICPTs {
  uint64 e8s = 1;
}

message Payment {
  ICPTs receiver_gets = 1;
}

message Subaccount {
  bytes sub_account = 1;    // always 32 bytes
}
message AccountIdentifier {
  bytes hash = 1;    // always 32 bytes, starts with CRC32
}

message BlockHeight {
  uint64 height = 1;
}

// Get the length of the chain with a certification
message TipOfChainRequest {
}

message TipOfChainResponse {
  Certification certification = 1;
  BlockHeight chain_length = 2;
}

// How many ICPTs are there not in the minting account
message TotalSupplyRequest {
}

message TotalSupplyResponse {
  ICPTs total_supply = 1;
}

// Get the balance of an account
message AccountBalanceRequest  {
  AccountIdentifier account = 1;
}

message AccountBalanceResponse {
  ICPTs balance = 1;
}

message SendRequest {
  Memo memo = 1;
  Payment payment = 2;
  ICPTs max_fee = 3;
  Subaccount from_subaccount = 4;
  AccountIdentifier to = 5;
  BlockHeight created_at = 6;
  TimeStamp created_at_time = 7;
}

message SendResponse {
  BlockHeight resulting_height = 1;
}
</textarea
      >

      <h4>Proto Argument (in JSON, using camelCase)</h4>
      <input id="requestType" type="text" value="SendRequest" />
      <textarea id="value" cols="80" rows="20" style="width: 100%">
{
  "memo": {
    "memo": 0
  },
  "payment": {
    "receiverGets": {
      "e8s": 1000000000000
    }
  },
  "maxFee": {
    "e8s": 137
  },
  "fromSubaccount": {
    "subAccount": [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
    ]
  },
  "to": {
    "hash": [
       63, 192,  30,  55, 155,  49, 178, 255,
      133,  46, 202, 117,   7,  89, 119, 227,
      157,  10, 167, 171, 191,  44,  27, 190,
      168, 104, 237, 139,  75, 108, 121, 255
    ]
  }
}
</textarea
      >

      <h4>Response (in JSON)</h4>
      <input id="responseType" type="text" value="SendResponse" />
      <textarea id="responseJson" cols="80" rows="5" style="width: 100%"> </textarea>

      <div><button id="sendBtn" class="connected-only">Send</button></div>
    </section>
  </body>
</html>
